<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="/css/animate.min.css" rel="stylesheet">
    <link href="/css/validate.css" rel="stylesheet">
    <link href="/css/style.min.css" rel="stylesheet">

    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css" rel="stylesheet">
    <link href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <link href="/js/bootstrap-clockpicker/bootstrap-clockpicker.min.css" rel="stylesheet">

<!--    <link href="css/bootstrap-editable.min.css" rel="stylesheet">-->

    <script>
        if (document.referrer === ''){
            location='/afterorderlist';
        }
    </script>
</head>
<body>

<div class="container-fluid p-t-10">
    <div class="row">
        <div class="col-lg-11">
            <div class="card">
                <div class="card-header"><h4>售后订单管理</h4></div>
                <div class="card-body">
                    <form class="form-inline" id="queryform">
                        <div class="form-group">
                            <label class="sr-only">订单号</label>
                            <input id="afterordernum" class="form-control" type="text" placeholder="请输入订单号" name="afterordernum">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">关联订单</label>
                            <input id="ordernum" class="form-control" type="text" placeholder="请输入关联订单号" name="ordernum">
                        </div>
                        <div class="form-group">
                            <label class="sr-only">服务内容</label>
                            <input id="service" class="form-control" type="text" placeholder="请输入服务内容" name="service">
                        </div>

                        <div class="form-group">
                            <label class="sr-only">办理人</label>
                            <input id="emp" class="form-control" type="text" placeholder="请输入办理人" name="emp">
                        </div>

                        <div class="form-group">
                            <label class="sr-only">车牌号</label>
                            <input id="carno" class="form-control" type="text" placeholder="请输入车牌号" name="carno">
                        </div>



                        <div class="form-group">
                            <label class="sr-only">状态</label>
                            <select class="form-control" id="state" name="state" >
                                <option value="">---请选择状态---</option>
                                <option>未支付</option>
                                <option>已支付</option>
                                <option>已取消</option>
                            </select>
                        </div>



                        <div class="form-group">
                            <label class="sr-only">开始时间</label>
                            <input id="start_time" class="form-control js-datepicker" data-provide="datepicker" type="text" placeholder="选择开始时间" name="start_time">
                        </div>

                        <div class="form-group">
                            <label class="sr-only">结束时间</label>
                            <input id="end_time" class="form-control js-datepicker" data-provide="datepicker" type="text" placeholder="选择结束时间" name="end_time">
                        </div>




<!--                        <div class="form-group">-->
<!--                            <button class="btn btn-primary" type="button" onclick="query()">-->
<!--                                <span class="mdi mdi-magnify" aria-hidden="true"></span>查询-->
<!--                            </button>-->
<!--                        </div>-->

                    <div id="toolbar" class="toolbar-btn-action">
                        <button class="btn btn-xs btn btn-success" type="button" onclick="query()">
                            <span class="mdi mdi-magnify" aria-hidden="true"></span>筛选查询
                        </button>
                        <button id="btn_add" type="button" class="btn btn-xs btn-primary m-r-5" data-toggle="modal" data-target="#add">
                            <span class="mdi mdi-plus" aria-hidden="true"></span>新建订单
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-xs btn-danger" onclick="delUsers()">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>批量删除
                        </button>
                        <button id="btn_excelin" type="button" class="btn btn-xs btn btn-cyan "  data-toggle="modal" data-target="#excelimport">
                            <span class="mdi mdi-square-edit-outline" aria-hidden="true"></span>批量导入
                        </button>
                        <button id="btn_excelout" type="button" class="btn btn-xs btn btn btn-warning" onclick="excelout()">
                            <span class="mdi mdi-login" aria-hidden="true"></span>批量导出
                        </button>

                    </div>
                    </form>
                    <table id="tb_ad"></table>
                </div>
            </div>
        </div>
    </div>

</div>

<!--新增模态框-->
<div class="modal fade bd-example" id="add" tabindex="-1" role="dialog" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/afterorderlist/add}" method="post" id="addform">
            <div class="modal-header">
                <h3 class="modal-title">新增订单</h3>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>购买订单号</label>
                    <input id="add_carorder" class="form-control" type="text"  name="add_carorder" placeholder="">
                </div>
                <div class="form-group">
                    <label>车牌号</label>
                    <input id="add_carno" class="form-control" type="text"  name="add_carno" placeholder="">
                </div>
                <div class="form-group">
                    <label>服务内容</label>
                    <input id="add_service" class="form-control" type="text"  name="add_service" placeholder="">
                </div>
                <div class="form-group">
                    <label>价格</label>
                    <input id="add_price" class="form-control" type="text"  name="add_price" placeholder="">
                </div>
                <div class="form-group">
                    <label>员工编号</label>
                    <input id="add_empnum" class="form-control" type="text"  name="add_empnum" placeholder="">
                </div>
                <div class="form-group">
                    <label>状态</label>
                    <select class="form-control" id="add_state" name="add_state" >
                        <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
                        <option>已支付</option>
                        <option>未支付</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>备注</label>
                    <input  id="add_remarks" name="add_remarks" class="form-control" type="text" placeholder="" >
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary" >添加</button>
            </div>
            </form>
            <!--/*@thymesVar id="addmsg" type="String"*/-->
            <input type="hidden" id="addmsg" th:value="${addmsg}">

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!--修改模态框-->
<div class="modal fade" id="mod" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form th:action="@{/afterorderlist/update}" method="post" id="upadteform" onsubmit="updateadmin">
            <div class="modal-header">
                <h4 class="modal-title">修改订单信息</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="card-body">
                <!--隐藏id域-->
                <input id="update_id" class="form-control" type="hidden" placeholder="" name="update_id" />
                <div class="form-group">
                    <p>1.如填错订单请取消，仅支持修改备注和状态。</p>
                    <p>2.已取消订单状态，不允许修改</p>
                </div>
                <div class="form-group">
                    <label>状态</label>
                    <select class="form-control" id="update_state" name="update_state" >
                        <option selected="selected" disabled="disabled"  style='display: none' value=''></option>
                        <option>已支付</option>
                        <option>未支付</option>
                        <option>取消订单</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>备注</label>
                    <input  id="update_remarks" name="update_remarks" class="form-control" type="text" placeholder="" >
                </div>


            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button id="sub" type="submit" class="btn btn-primary">修改</button>
            </div>
            </div>
            </form>

            <!--/*@thymesVar id="updatemsg" type="String"*/-->
            <input type="hidden" id="updatemsg" th:value="${updatemsg}" >
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<!--导入模态框-->
<div class="modal fade" id="excelimport" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h4 class="modal-title">批量导入</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form class="card-body" method="POST" action="/afterorderlist/excelimport" enctype="multipart/form-data">

                <div class="form-group">
                    <p>1.请选择需要导入的文件，文件格式必须为.xlsx和.xls</p>
                    <p>2.需要严格按照模板，否者导入失败</p>
                    <p>模板下载链接：<a href="/excel/售后订单导入模板.xlsx">Excel导入模板下载</a></p>
                </div>

                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">上传</span>
                    </div>
                    <div class="custom-file">
                        <input type="file" class="custom-file-input" onchange="change()" id="file" name="file">
                        <label class="custom-file-label" for="file" id="filename" name="filename"></label>
                    </div>
                </div>
                <div class="modal-content">
                    <!--                    <button type="button" class="btn btn-default " data-dismiss="modal">取消</button>-->
                    <button type="submit" class="btn btn-primary .btn-block">提交</button>
                </div>

            </form>
        </div>


    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>




<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>


<!--日期选择器-->
<script type="text/javascript" src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--时间日期选择器-->
<script type="text/javascript" src="/js/moment.js/moment.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/js/moment.js/locale/zh-cn.min.js"></script>
<!--时间选择器-->
<script type="text/javascript" src="/js/bootstrap-clockpicker/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>


<!--fenfefu-->

<!--表格插件-->
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!--行内编辑插件-->

<!--<script type="text/javascript" src="/js/bootstrap-editable.min.js"></script>-->
<!--<script type="text/javascript" src="/js/bootstrap-table/extensions/editable/bootstrap-table-editable.min.js"></script>-->
<!--<script type="text/javascript" src="/js/bootstrap-table/extensions/export/bootstrap-table-export.min.js"></script>-->
<!--<script type="text/javascript" src="/js/main.min.js"></script>-->


<!--弹出框插件-->
<script type="text/javascript" src="/js/bootbox.min.js"></script>
<script type="text/javascript" src="/js/bootbox.locales.min.js"></script>

<!--表单验证插件-->
<script type="text/javascript" src="/js/jquery.validate.js" th:src="@{/js/jquery.validate.js}"></script>
<script type="text/javascript" src="/js/messages_zh.js" th:src="@{/js/messages_zh.js}"></script>

<script type="text/javascript">
    $('#tb_ad').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: '/afterorderlist/query',
        method: 'post',
        contentType: "application/json",
        //contentType : "application/x-www-form-urlencoded",
        dataType : 'json',        // 因为本示例中是跨域的调用,所以涉及到ajax都采用jsonp,
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        //clickToSelect: true,     // 是否启用点击选中行
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮
        //search:true,               //是否显示表格搜索
        showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
        pagination: true,                    // 是否显示分页
        sortName:"update_time",
        sortOrder: "desc",                    // 排序方式
            queryParams: function(params) {
            //传递到后端为json格式,用map接收，使用@Requestbody注解
            var temp = {
                afterordernum:$("#afterordernum").val(),
                ordernum:$("#ordernum").val(),
                emp:$("#emp").val(),
                carno:$("#carno").val(),
                service:$("#service").val(),
                state:$("#state").val(),
                start_time:$("#start_time").val(),
                end_time:$("#end_time").val(),

            };
            return temp;
        },                                   // 传递参数
        sidePagination: "client",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 5,                        // 每页的记录行数
        pageList: [5,10, 25, 50, 100],         // 可供选择的每页的行数

        columns: [{
            checkbox: true    // 是否显示复选框
        }, {
            field: 'id',
            title: 'ID',
            sortable: true,    // 是否排序
            visible: false
        }, {
            field: 'afterordernum',
            title: '订单号',
            sortable: true,

        }, {
            field: 'carorder',
            title: '汽车订单',
            sortable: true,

            formatter : function(value,row, index){
                return row.carorder.ordernum;
            }
        },{
            field: 'carno',
            title: '汽车车牌号',
            sortable: true,
        },{
            field: 'service',
            title: '具体服务',
            sortable: true,

        },{
            field: 'price',
            title: '价格',
            sortable:true,

        }, {
            field: 'ename',
            title: '处理人',
            sortable: true,


            formatter : function(value,row, index){
                return row.emp.ename;
            }
        },{
            field: 'create_time',
            title: '订单创建时间',
            sortable: true,

        },{
            field: 'update_time',
            title: '订单修改时间',
            sortable: true,
        }, {
            field: 'state',
            title: '状态',
            sortable: true
        }, {
            field: 'afterremarks',
            title: '订单备注',
            sortable: true,

        },{
                field: 'operate',
                title: '操作',
                formatter: btnGroup,  // 自定义方法
                events: {
                    'click .edit-btn': function (event, value, row, index) {

                        if(row.state=="已取消"){
                            bootbox.alert({message: "已取消订单，不允许更改",size:'small'});
                            return 0;
                        }
                        $("#update_id").val(row.id);
                        $("#update_remarks").val(row.afterremarks);
                        $("#update_state").val(row.state);



                        $("#mod").modal('show');

                }
            }
        }],
        onLoadSuccess: function(data){
            $("[data-toggle='tooltip']").tooltip();
        }
    });
    // 操作按钮
    function btnGroup ()
    {
        var html =
            '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>';
        return html;
    }

    //批量删除
    function delUsers() {
        var rows = $("#tb_ad").bootstrapTable('getSelections');
        if (rows.length===0){
            bootbox.alert({message:"请选择要删除的行",size:'small'})
        }else{
            var ids = [];
            for (var i=0;i<rows.length;++i){
                ids.push(rows[i].id);
            }
            bootbox.confirm({
                message: "是否确认删除，删除订单将不会释放库存，请谨慎删除",
                size: 'small',
                buttons: {
                    confirm: {
                        label: '确认',
                        className: 'btn-success'
                    },
                    cancel: {
                        label: '取消',
                        className: 'btn-danger'
                    }
                },
                callback: function (result) {
                    if (result){
                        $.ajax({
                            url: 'afterorderlist/del',
                            type: 'POST',
                            contentType: "application/json",
                            dataType: "json",
                            data: JSON.stringify(ids),
                            success: function (result) {
                                console.log(result);
                                if (result.code === 0) {

                                    bootbox.alert({message: "操作失败",size:'small'});

                                } else {
                                    bootbox.alert({message: "订单删除成功",size:'small'});
                                    $('#tb_ad').bootstrapTable('refresh', {pageNumber: 1,pageSize: 5});
                                }
                            }
                        });
                    }

                }
            });
        }

    }

    //筛选查询
    function query() {

            $('#tb_ad').bootstrapTable('refresh');


    }
</script>
<!--<script href="text/javascript" >-->
<!--    $function-->

<!--</script>-->
<script>
    //表单验证
    $().ready(function() {
        $("#addform").validate(
            {
                rules: {
                    add_carorder:"required",
                    add_carno:"required",
                    add_service:"required",
                    add_price:{
                        required:true,
                        number:true
                    },

                    add_empnum:"required",
                    add_state:"required",

                },
                messages:{
                    add_carorder:"关联订单不能为空",
                    add_carno:"车牌不能为空",
                    add_service:"服务内容不能为空",
                    add_carid:{
                        required:"汽车编号不能为空",
                        number: "请输入数字"
                    },
                    add_empnum:"员工号不能为空",
                    add_state:"请选择状态",

                },

                errorElement: "em"

            }
        );



    });
</script>
<script type="text/javascript">

    function change() {
        console.log($("#file").val())
        var filename=document.getElementById("filename");
        filename.innerHTML=$("#file").val();

    }

    function excelout(){
        var param = {
            afterordernum:$("#afterordernum").val(),
            ordernum:$("#ordernum").val(),
            emp:$("#emp").val(),
            carno:$("#carno").val(),
            service:$("#service").val(),
            state:$("#state").val(),
            start_time:$("#start_time").val(),
            end_time:$("#end_time").val(),
        };


        $.ajax({
            type:"POST",
            contentType: "application/json;charset=utf-8",
            url:"/afterorderlist/excelparamset",
            data:JSON.stringify(param),
            success:function (result) {
                console.log("成功");
                //ajax本质上属于JavaScript，所以只能在浏览器中运行，不能访问浏览器之外的系统资源
                //下载的文件是在js中，无法查看，所以下载文件需要使用window.open()
                window.open("/afterorderlist/excelexport")

            },
            error:function (result) {
                console.log("失败")

            }
        })


    }





    onload=function(){
        var addmsg =  $("#addmsg").val();
        if(addmsg){
            bootbox.alert({message: addmsg,size:'small'});
        }
        var updatemsg =  $("#updatemsg").val();
        if(updatemsg){
            bootbox.alert({message: updatemsg,size:'small'});
        }
    };
</script>


</body>
</html>
